<!-- 退单详情 -->
<template>
  <div class="orderBack-main">
    <el-card>
      <div slot="header">
        <span>退货商品</span>
      </div>
      <!-- 商品信息 -->
      <el-table :data="product" border style="width: 100%">
        <el-table-column align="center" label="商品图片" width="180">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.cover_img"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品描述" width="180">
          <template slot-scope="scope">
            <p>{{scope.row.gname}}</p>
            <p>
              <span>{{scope.row.brandName}}</span>
              <span>|{{scope.row.brandEname}}</span>
            </p>
            <p>{{scope.row.gdescr}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="价格货号" width="180">
          <template slot-scope="scope">
            <p>价格:¥{{scope.row.p_price/100||scope.row.sku_price}}</p>
            <p>货号:{{scope.row.sku_code}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品属性" width="180">
          <template slot-scope="scope">
            <p>{{scope.row.color_text}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品数量" prop="count" width="180"></el-table-column>
        <el-table-column align="center" label="小计" width="180">
          <template slot-scope="scope">
            <p>¥{{(scope.row.sku_price/100)*scope.row.count}}</p>
          </template>
        </el-table-column>
      </el-table>

      <!-- 订单信息 -->
      <el-card shadow="never">
        <div slot="header">
          <span>订单信息</span>
        </div>
        <el-row>
          <el-col :span="24">
            <div class="orderBackInfo">
              <span class="orderBackDes">退单单号</span>
              <span class="orderBackCon">{{orderBackInfo.id}}</span>
            </div>
            <div class="orderBackInfo">
              <span class="orderBackDes">当前状态</span>
              <span class="orderBackCon">{{orderBackInfo.process}}</span>
            </div>
            <div class="orderBackInfo">
              <span class="orderBackDes">订单编号</span>
              <span class="orderBackCon">{{orderBackInfo.orderId}}</span>
            </div>
            <div class="orderBackInfo">
              <span class="orderBackDes">申请时间</span>
              <span class="orderBackCon">{{orderBackInfo.addtime}}</span>
            </div>
            <div class="orderBackInfo">
              <span class="orderBackDes">用户账号</span>
              <span class="orderBackCon">{{orderBackInfo.username}}</span>
            </div>
            <div class="orderBackInfo">
              <span class="orderBackDes">退单理由</span>
              <span class="orderBackCon">{{orderBackInfo.reason}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top:10px">
          <el-col :span="12">
            <div class="orderBackInfo">
              <span class="orderBackDes">联系人:</span>
              <span class="orderBackCon">{{orderBackInfo.sendUser}}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="orderBackInfo">
              <span class="orderBackDes">联系电话:</span>
              <span class="orderBackCon">{{orderBackInfo.tel}}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="orderBackInfo">
              <span class="orderBackDes">收货地址:</span>
              <span class="orderBackCon">{{orderBackInfo.cityStr}}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="orderBackInfo">
              <span class="orderBackDes">邮编:</span>
              <span class="orderBackCon">52400</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="orderBackInfo">
              <span class="orderBackDes">详细地址:</span>
              <span class="orderBackCon">{{orderBackInfo.cityBak}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top:20px">
          <el-col :span="12">
            <div class="orderBackInfo">
              <span class="orderBackDes">订单金额</span>
              <span class="orderBackCon">¥{{orderBackInfo.order_price}}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="orderBackInfo">
              <span class="orderBackDes">确认退款金额:</span>
              ￥
              <el-input-number
                v-if="orderBackInfo.process==0"
                v-model="orderBackDetail.back_price"
                style="text-indent:0"
                size="mini"
                :min="0"
                label
              />
              <i v-if="orderBackInfo.process>0">{{ orderBackInfo.back_price }}</i>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top:20px">
          <el-col :span="24">
            <div class="orderBackInfo">
              <span class="orderBackDes">备注信息:</span>
              <el-input
                class="orderBackCon"
                size="mini"
                style="width:500px; display: inline-block;"
                placeholder="通过/拒绝的处理备注"
                v-model="handlebak"
              ></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top:20px">
          <el-col :span="12">
            <div class="orderBackInfo">
              <span class="orderBackDes">处理备注:</span>
              <span>{{ orderBackDetail.handlebak }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="orderBackInfo">
              <span class="orderBackDes">处理时间</span>
              <span class="orderBackCon">{{orderBackInfo.handletime}}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <div v-if="orderBackDetail.statusend=='0'" style="margin: 30px auto; text-align: center;">
        <el-button v-if="orderBackDetail.process=='0'" type="default" @click="orderBackreject">拒绝退货</el-button>
        <el-button v-if="orderBackDetail.process=='0'" type="primary" @click="orderBackAgree">确认退货</el-button>
        <el-button v-if="orderBackDetail.process=='1'" type="primary" @click="orderBackDone">收到退货</el-button>
        <el-button v-if="orderBackDetail.process=='9'" type="primary" @click="orderBackClose">关闭订单</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import orderBackApi from "@/api/order/orderBack";
export default {
  data() {
    return {
      backId: "",
      orderBackDetail: {},
      handlebak: "",
    };
  },
  created() {
    this.backId = this.$route.params.id;

    this.getOrderBackDetail(); //初始化退单详情页
  },
  computed: {
    product() {
      var p = {
        ...this.orderBackDetail.product,
        count: this.orderBackDetail.count,
      };
      return [p];
    },
    //退单信息
    orderBackInfo() {
      const orderBackProcess = {
        "0": "等待处理",
        "1": "确认退货,等待收货",
        "2": "确认收货,已退款",
        "9": "拒绝退货",
      };
      return {
        id: this.orderBackDetail.id,
        process: orderBackProcess[this.orderBackDetail.process],
        orderId: this.orderBackDetail.orderId,
        addtime: this.orderBackDetail.addtime,
        username: this.orderBackDetail.username,
        reason: this.orderBackDetail.reason,
        sendUser: this.orderBackDetail.sendUser,
        tel: this.orderBackDetail.tel,
        cityStr: this.orderBackDetail.cityStr,
        cityBak: this.orderBackDetail.cityBak,
        order_price: this.orderBackDetail.order_price,
        back_price: this.orderBackDetail.back_price,
        handletime: this.orderBackDetail.handletime,
      };
    },
  },
  methods: {
    //退单详情
    getOrderBackDetail() {
      orderBackApi
        .orderBackDetail({
          id: this.backId,
        })
        .then((res) => {
          this.orderBackDetail = res.data;
        });
    },
    //拒绝退货
    orderBackreject() {
      orderBackApi
        .rejectBack({
          id: this.backId,
          bak: this.handlebak,
        })
        .then((res) => {
          if (res.code == "success") {
            location.reload();
          } else {
            this.$message.error("请求错误!");
          }
        });
    },
    //同意退单
    orderBackAgree() {
      orderBackApi
        .orderBackMony({
          id: this.backId,
          bak: this.handlebak,
          back_price: this.orderBackDetail.back_price,
        })
        .then((res) => {
          if (res.code == "success") {
            location.reload();
          } else {
            this.$message.error("请求错误!");
          }
        });
    },
    //收到退货
    orderBackDone() {
      orderBackApi.orderBackDone({
        id:this.backId,
        bak:this.handlebak,
      })
      .then(res=>{
        if (res.code == "success") {
            location.reload();
          } else {
            this.$message.error("请求错误!");
          }
      })
    },

    //关闭退单
    orderBackClose() {
      orderBackApi.orderBackClose({
        id:this.backId,
        bak:this.handlebak,
      })
      .then(res=>{
        if (res.code == "success") {
            location.reload();
          } else {
            this.$message.error("请求错误!");
          }
      })
    },
  },
};
</script>
<style lang='scss' scoped>
.orderBack-main {
  .el-card {
    margin: 30px;
  }
  .orderBackInfo {
    border: 1px solid #ebeef5;
    height: 40px;
    line-height: 40px;
    z-index: 5;
    .orderBackDes {
      display: inline-block;
      width: 220px;
      height: 38px;
      border-right: 1px solid #ebeef5;
      padding-left: 15px;
      background-color: #f5f7fa;
    }
    .orderBackCon {
      padding-left: 15px;
    }
  }
}
</style>